<template>
	<view class="container">
		<view class="voucher-page">
			<view class="voucher-title">团体入园凭证</view>
			<view class="reservation-time">
				<text>预约时间：</text>
				<text>{{ userInfo.date }} ~ {{ userInfo.time }}</text>
			</view>
			<view class="reservation-info">
				<text style="font-size: 17px ;font-weight: bold;">预约信息：</text>
				<view class="all">
					<view class="info-item">
						<text>团体名称：{{ userInfo.teamName }}</text>
					</view>
					<view class="info-item">
						<text>团体人数：{{ userInfo.totalPeople }}</text>
					</view>
				</view>
			</view>
			<view class="bookingperson">
				<text style="font-size: 17px ;font-weight: bold;">预约者信息：</text>
				<view class="all">
					<view class="info-item">
						<text>姓名：{{ userInfo.membername }}</text>
					</view>
					<view class="info-item">
						<text>证件类型：{{ userInfo.memberidType }}</text>
					</view>
					<view class="info-item">
						<text>证件号码：{{ userInfo.memberidNumber }}</text>
					</view>
					<view class="info-item">
						<text>手机号码：{{ userInfo.memberphoneNumber }}</text>
					</view>
				</view>
			</view>
			<view class="hints">
				<text class="hint-text">园区花草，种植不易请爱护</text>
				<text class="countdown-text">{{countdownText}}</text>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '张三',
					idType: '身份证',
					idNumber: '123456789012345678',
					phoneNumber: '13800000000',
					teamName: '事例团队',
					totalPeople: 50,
				},
				// 剩余时间（秒）
				remainingTime: 0,
				// 倒计时文本  
				countdownText: '',
				// 定时器ID  
				countdownTimer: null,
			};
		},


		created() {
			// 假设这是从服务器获取剩余时间的函数  
			// 这里我们直接设置一个模拟值来演示  
			this.fetchRemainingTime();
		},

		methods: {
			fetchRemainingTime() {
				// 实际应用中，这里应该是异步请求获取剩余时间  
				// 这里我们直接设置一个模拟值  
				this.remainingTime = 259200; // 1天10小时23分钟 = 1*24*3600 + 10*3600 + 23*60 = 106980秒  
				this.startCountdown();
			},

			startCountdown() {
				this.countdownTimer = setInterval(() => {
					if (this.remainingTime > 0) {
						const days = Math.floor(this.remainingTime / (24 * 3600));
						const hours = Math.floor((this.remainingTime % (24 * 3600)) / 3600);
						const minutes = Math.floor((this.remainingTime % 3600) / 60);
						const seconds = Math.floor(this.remainingTime % 60);
						this.countdownText = `${days}天${hours}小时${minutes}分钟${seconds}秒后凭证将消失，可发起新的预约`;
						this.remainingTime--;
					} else {
						clearInterval(this.countdownTimer);
						this.countdownText = '凭证已消失，可发起新的预约';
					}

				}, 1000); //一千毫秒后执行 
			},
		},

		onUnload() {
			// 页面卸载时清除定时器  
			if (this.countdownTimer) {
				clearInterval(this.countdownTimer);
			}
		},
		// 如果需要，还可以添加其他生命周期钩子或方法    
		onLoad() {
			// 从本地存储中读取数据
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},

	}
</script>



<style scoped>
	.voucher-page {
		padding: 20px;
		font-family: Arial, sans-serif;
	}

	.voucher-title {
		font-size: 20px;
		font-weight: bold;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
	}

	.reservation-time {
		margin-top: 20px;
		text-align: center;
	}

	.reservation-info {
		margin-top: 50px;
		margin-bottom: -40px;
	}

	.bookingperson {
		margin-bottom: 15px;
		margin-top: 60px;

	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
		margin-top: 15px;
		margin-left: 10px;
	}

	.all {
		border: 1px;
		border-style: solid;
		border-color: white;
		background-color: white;
		border-radius: 10px;
		border-width: 10px;
		margin-top: 10px;
	}

	.hints {
		color: rgba(0, 0, 0, 0.5);
		font-size: 14px;
	}

	.hint-text {
		margin-top: 50px;
		display: block;
		text-align: center;
	}

	.countdown-text {
		margin-top: 20px;
		display: block;
		text-align: center;
		margin-bottom: 10px;
	}

	.container {
		/* 设置背景图片 */
		background-image: url('https://pic.imgdb.cn/item/668bb1eed9c307b7e9d23979.png');
		/* 设置背景图片覆盖整个元素 */
		background-size: cover;
		/* 背景图片不重复 */
		background-repeat: no-repeat;
		/* 背景图片将随着页面滚动而滚动 */
		background-attachment: scroll;
		/* 可选：设置背景图片的位置，例如居中 */
		background-position: center;
		/* 设置元素高度（如果需要） */
		height: 100vh;
		/* 或者其他高度值 */
		/* 其他样式 */
	}
</style>